Adding "Next" and "Previous" links (often called Pagination) makes your blog much more user-friendly. It allows readers to continue reading without having to go back to the homepage or the sidebar.
1. Update the Post Folder Settings
To let 11ty know that posts should be treated as a sequence, we need to add a bit of configuration to your posts/posts.json file.
Open posts/posts.json and update it to look like this:
JSON
{
"tags": "post",
"layout": "layout.njk"
}
(Note: Moving the layout here means you no longer have to type layout: layout.njk in every single blog post file!)
---
2. Add the Navigation to your Layout
Open _includes/layout.njk. We will add the navigation links right after the {{ content | safe }} line inside the
HTML
{{ title }}
{{ content | safe }}{# Pagination Logic #}
{% if tags and "post" in tags %}
{% endif %}
---
3. Add the Styling
To make the links look nice and sit on opposite sides of the page, add this to your